<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			ul {
			margin:0;
			padding:0;
			list-style:none;
		}
		li {
			white-space:nowrap;
		}
		a {
			color:#000;
			text-decoration:none;
			text-align:center;
			font-size:20px;
			line-height:30px;
		}
		a:hover {
			color:#000;
			text-decoration:none;
		}
		.panel-level-1 > li {
			padding:0 20px;
			border:1px solid black;
			border-radius:5px;
			width:250px;
			overflow:hidden;
			margin-bottom:10px;
		}
		.panel-level-2 > li {
			padding-left:20px;
			border:1px solid black;
			border-radius:5px;
			margin-bottom:10px;
		}
		.panel-level-3 > li {
			padding-left:20px;
		}


		</style>
	</head>
	<body>
		<!--详情父级-->
<div class="container">
    <div class="row">
        <!--商品分配导航盒子-->
        <div class="col-lg-4">
            <ul class="panel-level-1">
                <li>
                    <!--一级分类标题-->
                    <a href="javascript:;" class="title-level-1" show="true">一级标题</a>
                    <!--二级菜单本体-->
                    <ul class="panel-level-2">
                        <li>
                            <!--二级分类标题-->
                            <a href="javascript:;" class="title-level-2" show="true">二级标题</a>
                            <!--三级菜单本体-->
                            <ul class="panel-level-3">
                                <!--三级商品内容-->
                                <li><a href="javascript:;" class="product">三级内容</a></li>
                                <li><a href="javascript:;" class="product">三级内容</a></li>
                                <li><a href="javascript:;" class="product">三级内容</a></li>
                            </ul>
                        </li>
                        <li>
                            <!--二级分类标题-->
                            <a href="javascript:;" class="title-level-2" show="true">二级标题</a>
                            <!--三级菜单本体-->
                            <ul class="panel-level-3">
                                <!--三级商品内容-->
                                <li><a href="javascript:;" class="product">三级内容</a></li>
                                <li><a href="javascript:;" class="product">三级内容</a></li>
                                <li><a href="javascript:;" class="product">三级内容</a></li>
                            </ul>
                        </li>
                        <li>
                            <!--二级分类标题-->
                            <a href="javascript:;" class="title-level-2" show="true">二级标题</a>
                            <!--三级菜单本体-->
                            <ul class="panel-level-3">
                                <!--三级商品内容-->
                                <li><a href="javascript:;" class="product">三级内容</a></li>
                                <li><a href="javascript:;" class="product">三级内容</a></li>
                                <li><a href="javascript:;" class="product">三级内容</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <!--一级分类标题-->
                    <a href="javascript:;" class="title-level-1" show="true">一级标题</a>
                    <!--二级菜单本体-->
                    <ul class="panel-level-2">
                        <li>
                            <!--二级分类标题-->
                            <a href="javascript:;" class="title-level-2" show="true">二级标题</a>
                            <!--三级菜单本体-->
                            <ul class="panel-level-3">
                                <!--三级商品内容-->
                                <li><a href="javascript:;" class="product">三级内容</a></li>
                                <li><a href="javascript:;" class="product">三级内容</a></li>
                                <li><a href="javascript:;" class="product">三级内容</a></li>
                            </ul>
                        </li>
                        <li>
                            <!--二级分类标题-->
                            <a href="javascript:;" class="title-level-2" show="true">二级标题</a>
                            <!--三级菜单本体-->
                            <ul class="panel-level-3">
                                <!--三级商品内容-->
                                <li><a href="javascript:;" class="product">三级内容</a></li>
                                <li><a href="javascript:;" class="product">三级内容</a></li>
                                <li><a href="javascript:;" class="product">三级内容</a></li>
                            </ul>
                        </li>
                        <li>
                            <!--二级分类标题-->
                            <a href="javascript:;" class="title-level-2" show="true">二级标题</a>
                            <!--三级菜单本体-->
                            <ul class="panel-level-3">
                                <!--三级商品内容-->
                                <li><a href="javascript:;" class="product">三级内容</a></li>
                                <li><a href="javascript:;" class="product">三级内容</a></li>
                                <li><a href="javascript:;" class="product">三级内容</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
<li>
                    <!--一级分类标题-->
                    <a href="javascript:;" class="title-level-1" show="true">一级标题</a>
                    <!--二级菜单本体-->
                    <ul class="panel-level-2">
                        <li>
                            <!--二级分类标题-->
                            <a href="javascript:;" class="title-level-2" show="true">二级标题</a>
                            <!--三级菜单本体-->
                            <ul class="panel-level-3">
                                <!--三级商品内容-->
                                <li><a href="javascript:;" class="product">三级内容</a></li>
                                <li><a href="javascript:;" class="product">三级内容</a></li>
                                <li><a href="javascript:;" class="product">三级内容</a></li>
                            </ul>
                        </li>
                        <li>
                            <!--二级分类标题-->
                            <a href="javascript:;" class="title-level-2" show="true">二级标题</a>
                            <!--三级菜单本体-->
                            <ul class="panel-level-3">
                                <!--三级商品内容-->
                                <li><a href="javascript:;" class="product">三级内容</a></li>
                                <li><a href="javascript:;" class="product">三级内容</a></li>
                                <li><a href="javascript:;" class="product">三级内容</a></li>
                            </ul>
                        </li>
                        <li>
                            <!--二级分类标题-->
                            <a href="javascript:;" class="title-level-2" show="true">二级标题</a>
                            <!--三级菜单本体-->
                            <ul class="panel-level-3">
                                <!--三级商品内容-->
                                <li><a href="javascript:;" class="product">三级内容</a></li>
                                <li><a href="javascript:;" class="product">三级内容</a></li>
                                <li><a href="javascript:;" class="product">三级内容</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div></div></div>
		<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
		<script>
			$(function(){
				//初始化菜单（全部隐藏）
				init('.title-level-1');
				init('.title-level-2');
				//给一级菜单和二级菜单添加点击事件
				$('.title-level-1').click(showHide);
				$('.title-level-2').click(showHide);
				//菜单点击事件函数
				function showHide() {
				    //先使同级节点全部隐藏
				    if ($(this).prop('className') == 'title-level-1') {
				        $('.title-level-1').attr('show', false);
				        $('.title-level-1').next().hide(300);
				    } else if ($(this).prop('className') == 'title-level-2') {
				        $('.title-level-2').attr('show', false);
				        $('.title-level-2').next().hide(300);
				    }
				    if ($(this).attr('show') == 'true' || $(this).next().css('display') == 'block') {
				        $(this).next().hide(300);
				        $(this).attr('show', false);
				    } else {
				        $(this).next().show(300);
				        $(this).attr('show', true);
				    }
				}
				
				function init(ulName) {
				    $(ulName).attr('show', false);
				    $(ulName).next().hide();
				}
			})
		</script>
	</body>
</html>
